<template>
    <div class="Table">
        <div class="top">
            <ux-grid :data="tableData" :border="true" :header-cell-style="{
                color: 'rgba(0, 0, 0, 0.85)',
                fontSize: '14px',
                textAlign: 'left',
                fontWeight: 'bold',
                padding: 0,
                height: '32px',
                background: '#F5F5F5',
            }" :cell-style="{
                color: 'rgba(96,98,102,1)',
                fontSize: '14px',
                textAlign: 'left',
                padding: 0,
                height: '32px',
            }" :row-style="{
                color: 'rgba(96,98,102,1)',
                fontSize: '13px',
                textAlign: 'left',
                padding: 0,
                height: '32px',
            }" @row-click="rowClick" max-height="758" ref="uxGrid" :height="tableHeight" v-loading="loading"
                element-loading-spinner="el-icon-loading" element-loading-background="#f8f8f8"
                :element-loading-text="$t('message.bhView.loading')">
                <template slot="empty"> No data </template>
                <!-- <ux-table-column style="pointer-events:none;" type="checkbox" width="55"> </ux-table-column> -->
                <ux-table-column property="codName" align="left" title="プロットプラン名称">
                    <template slot-scope="scope">
                        <div style="text-align: center;">
                            <el-input class="table-input left" v-model="scope.row.areaName"
                                :class="!scope.row.isAAA ? '' : 'orange'"
                                @input="scope.row.areaName = $setMaxLength(scope.row.areaName, 30)"></el-input>
                        </div>
                    </template>
                </ux-table-column>
                <ux-table-column property="codName" align="left" title="略称">
                    <template slot-scope="scope">
                        <div style="text-align: center;">
                            <el-input class="table-input left" v-model="scope.row.areaAbrv"
                                @input="scope.row.areaAbrv = $setMaxLength(scope.row.areaAbrv, 30)"></el-input>
                        </div>
                    </template>
                </ux-table-column>
                <ux-table-column property="codName" align="left" title="ファイル名">
                    <template slot-scope="scope">
                        <div style="padding: 0 16px;" :class="!scope.row.isAAA ? '' : 'orange'">
                            {{ scope.row.areaFile }}
                        </div>
                    </template>
                </ux-table-column>
                <ux-table-column property="codName" align="center" title="表示順" width="120">
                    <template slot-scope="scope">
                        <div style="text-align: center;">
                            <el-input class="table-input center" v-model="scope.row.codOrdr"
                                :class="!scope.row.isAAA ? '' : 'orange'"
                                @input="scope.row.codOrdr = $setMyNum(scope.row.codOrdr, '3 - 0').toString()"></el-input>
                        </div>
                    </template>
                </ux-table-column>
            </ux-grid>
        </div>

        <div class="bottom" v-show="showTypeBy3 == 2">
            <tab2Svg :svgUrl="svgUrl" :showTypeBy3="showTypeBy3" :proPass="proPass"></tab2Svg>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
import { getDrwPlanList, updDrwPlan, delDrwPlan, delDrwPlanFile } from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import EventBus from "@/eventBus/bus";
import _ from 'lodash-es';
import tab2Svg from '../Tab2/tab2Svg.vue'
export default {
    name: "DeviceLoginIndex",
    data() {
        return {
            tableData: [],
            tableDataClone: [],
            tableHeight: '350',
            loading: false,
            activeRow: {},
            addFlg: false,
            activeIndex: 0,
            svgUrl: '',
            proPass: ''
        };
    },
    components: {
        tab2Svg,
    },
    props: ["showTypeBy3"],// 1列表2列表-图形
    watch: {
        showTypeBy3: {
            handler(newV, oldV) {
                console.log(newV);
                this.changeTableHeight();
                this.svgUrl = this.activeRow.filePath;
            },
            immediate: true,
            deep: true,
        },
        activeRow: {
            handler(newV, oldV) {
                this.$emit("changeBtnFlgFn2", !newV.areaFile);
                this.proPass = newV.areaFile;
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        //点击表格行
        rowClick(row) {
            console.log(row);
            this.activeRow = row;
            this.activeIndex = row.ii;
            this.svgUrl = row.filePath;
            console.log(this.svgUrl);
        },

        addRowFn() {
            this.tableData.push({
                "areaName": "",
                "areaAbrv": "",
                "areaFile": "",
                "codOrdr": "",
                "filePath": "",
                "areaCode": "0",
                "fitType": "0",
                "width": 0,
                "height": 0,
                "pltCode": this.$store.state.pltCode,
                "ii": this.tableData.length,
                "isAAA": true
            });
            this.addFlg = true;
            this.activeIndex = this.tableData.length - 1;
            this.$refs.uxGrid.setCurrentRow(this.tableData[this.activeIndex]);
            setTimeout(() => {
                this.$refs.uxGrid.pagingScrollTopLeft(99999);
            }, 300);
            this.$emit("changeBtnFlgFn", true);
        },

        async saveFn() {
            this.tableData.forEach((item, index) => {
                if (index < this.tableDataClone.length) {
                    if (_.isEqual(item, this.tableDataClone[index])) {
                        item.EditType = false;
                        item.AddType = false;
                    } else {
                        item.EditType = true;
                        item.AddType = false;
                    }
                } else {
                    item.EditType = false;
                    item.AddType = true;
                }
            })
            let dataJson = {
                DataList: this.tableData,
                // AddType: this.addFlg,
                // EditType: !_.isEqual(this.tableData, this.tableDataClone)
            };
            let res = await updDrwPlan(dataJson);
            if (res.data.code == 0) {
                this.$message.success(res.data.msg);
                this.addFlg = false;
                this.initFn();
            } else {
                this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
            }
        },
        async delFn() {
            let dataJson = {
                AreaCode: Number(this.activeRow.areaCode),
                AddType: Number(this.activeRow.areaCode) == 0
            };
            let res = await delDrwPlan(dataJson);
            if (!res) {
                return
            }
            if (res.data.code == 451) {
                this.$confirm(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(async () => {
                    this.initFn();
                }).catch(() => {

                });
                return
            }
            if (res.data.code == 0) {
                this.$message.success(res.data.msg);
                this.addFlg = false;
                this.initFn();
            } else {
                this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
            }
        },
        async delRowFileFn() {
            // let dataJson = {
            //     AreaCode: Number(this.activeRow.areaCode),
            // };
            // let res = await delDrwPlanFile(dataJson);
            // this.initFn();

            this.activeRow.filePath = "";
            this.activeRow.areaFile = "";
            this.svgUrl = "";
        },
        async initFn() {
            this.tableData = [];
            this.loading = true;
            let dataJson = {};
            let res = await getDrwPlanList(dataJson);
            this.$emit("changeBtnFlgFn", false);
            this.loading = false;
            if (res.data.code == -300) {
                this.$emit("changeBtnFlgFn1", true);
                return
            }
            this.$emit("changeBtnFlgFn1", false);
            if (res.data.code != 0) {
                return
            }
            if (res.data.code == 451) {
                this.$confirm(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(async () => {
                    this.initFn();
                }).catch(() => {

                });
                return
            }
            this.tableData = res.data.data;
            this.tableData.forEach((item, index) => {
                item.ii = index;
            })
            if (this.activeIndex > this.tableData.length - 1) {
                this.activeIndex = 0;
            }
            this.activeRow = this.tableData[this.activeIndex];
            this.svgUrl = this.activeRow.pdfFile;
            this.$refs.uxGrid.setCurrentRow(this.tableData[this.activeIndex]);
            setTimeout(() => {
                this.tableDataClone = _.cloneDeep(this.tableData);
            }, 300);
        },

        // 计算表格高度
        changeTableHeight() {
            let str = this.showTypeBy3 == 1 ? '.Table' : '.top';
            this.tableHeight = $(str).height();
            window.addEventListener(
                "resize",
                () => {
                    return (() => {
                        this.tableHeight = $(str).height();
                    })();
                },
                false
            );
        }
    },
    created() { },
    mounted() {
        this.changeTableHeight();

        this.initFn();
        EventBus.$on("deviceGetTableRow", (val) => {
            console.log(val);
            this.activeRow.filePath = val[0].path;
            this.svgUrl = val[0].path;
            let tempPath = '';
            try {
                val[0].projectRouteData.forEach((item, index) => {
                    if (index > 0) {
                        tempPath = `${tempPath}${item.name}` + "\\"
                    }
                })
            } catch (error) {

            }
            this.activeRow.areaFile = `${tempPath}${val[0].name}.${val[0].ext}`;
        });
    },
    beforeDestroy() {
        EventBus.$off("deviceGetTableRow");
    },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.Table {
    height: 100%;
    display: flex;
    flex-direction: column;

    div {
        height: 49%;
    }

    .top {
        background-color: #FFF;
    }

    .bottom {
        margin-top: 10px;
        background-color: #FFF;
        border-top: 1px solid #e1e1e1;
        height: 100%;
    }
}


.table-input {
    ::v-deep .el-input__inner {
        background: none;
        border: 0 none;
        padding: 0;
        height: 30px;
    }
}

.center {
    ::v-deep .el-input__inner {
        text-align: center;
    }
}

.right {
    ::v-deep .el-input__inner {
        text-align: right;
    }
}

::v-deep .elx-cell--title {
    padding: 0 16px;
}

::v-deep .elx-cell {
    width: 100%;
    padding: 0;
}

.Table {
    ::v-deep .el-input__inner {
        padding: 0 16px;
    }
}

.orange {
    width: 100%;
    height: 32px !important;
    line-height: 32px;
    background-color: #FEDDB1;

    ::v-deep .el-input__inner {
        background-color: #FEDDB1;
    }
}
</style>